import React, {useEffect, useState} from 'react';
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faSearch} from "@fortawesome/free-solid-svg-icons";
import classes from './FilterMeals.module.css'
const FilterMeals = (props) => {

    const [keyword, setKeyword] = useState('');

    useEffect(() => {
        //降低数据过滤次数
        const timer = setTimeout(() => {
            console.log('过滤数据')
            props.onFilter(keyword)
        },1000);

        console.log('过滤数据计时')
        return () => clearTimeout(timer)
    }, [keyword]);
    const inputChangeHandler = (e) => {
        setKeyword(e.target.value.trim())
    }

    return (
        <div className={classes.filterMeals}>
            <div className={classes.inputOuter}>
                <FontAwesomeIcon className={classes.searchIcon} icon={faSearch}/>
                <input className={classes.searchInput}
                      onChange={inputChangeHandler }
                       type={'text'}
                       value={keyword}
                       placeholder={"请输入关键字"} />
            </div>
        </div>
    );
};

export default FilterMeals;
